<template>
  <div class="flex justify-center items-center w-full h-full">
    <el-button type="primary" @click="onClick('left')">左</el-button>
    <el-button type="primary" @click="onClick('right')">右</el-button>
  </div>

  <esdrawer v-if="isshow" class="z-1000 esdrawer" :width="drawerTiem.width" :direction="drawerTiem.direction">
  </esdrawer>
</template>

<script setup lang="ts">
import { ref } from 'vue'

let isshow = ref(false)
const drawerTiem = ref({
  // 面板信息
  width: '330px',
  direction: 'left',
})
const onClick = (val: String) => {
  let mappping = {
    left: {
      width: '50%',
      direction: 'left',
    },
    right: {
      width: '50%',
      direction: 'right',
    },
  }
  drawerTiem.value = mappping[val]
  isshow.value = !isshow.value
  console.log(drawerTiem.value, val, '抽屉')
}
</script>
<style lang="scss" scoped>
// .esdrawer {
  // position: absolute;
// }
</style>